<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../common/header.jsp" %>
<div class="container-fluid p-t-15">
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <!--  <div class="card-header">
          <h4>TreeGrid使用</h4>
        </div>-->
        <div class="card-body">
          
          <div id="toolbar2" class="toolbar-btn-action">
            <button id="btn_add" type="button"  class="btn btn-cyan btn-sm m-r-5" onclick="add()">
             	<span class="mdi mdi-plus" aria-hidden="true"></span>添加
            </button>
			<button type="button" class="btn btn-danger btn-sm  m-r-5" onclick="selected_del()">
            	<span class="mdi mdi-window-close" aria-hidden="true"></span>删除
            </button>
          </div>
          
          <table class="bootstrap-table" style="text-align:center;word-break:break-all;"></table>
        </div>
      </div>
    </div>
    
  </div>
  
</div>
<%@ include file="../common/footer.jsp"%>
<script type="text/javascript">
var $treeTable = $('.bootstrap-table');
$treeTable.bootstrapTable({
    classes: 'table table-bordered table-hover table-striped table-condensed table-responsive',
	//ajax: ajaxRequest,
    url: "${pageContext.request.contextPath}/admin/role?method=Lst",
	method: 'post',
	dataType: 'json',        // 因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
	uniqueId: 'id',
	idField: 'index',        // 每行的唯一标识字段
	contentType: "application/x-www-form-urlencoded",
	toolbar: '#toolbar',       // 工具按钮容器
	//clickToSelect: true,     // 是否启用点击选中行
	showColumns: true,         // 是否显示所有的列
	showRefresh: true,         // 是否显示刷新按钮
	//showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
	pagination: true,                    // 是否显示分页
	sortName: 'id', 			// 要排序的字段
	sortOrder: "desc",                    // 排序方式
	queryParams: function (params) {
		console.log(params)
		var temp = {
			limit: params.limit,         // 每页数据量
			offset: params.offset,       // sql语句起始索引
			//page: (params.offset / params.limit) + 1,
			sort: params.sort,           // 排序的列名
			search: params.search,       // 搜索
			sortOrder: params.order      // 排序方式'asc' 'desc'
		};
		return temp;
	},                                   // 传递参数
	sidePagination: "server",            // 分页方式：client客户端分页，server服务端分页
	pageNumber: 1,                       // 初始化加载第一页，默认第一页
	pageSize: 10,                        // 每页的记录行数
	pageList: [10, 25, 50, 100],         // 可供选择的每页的行数
	search: true,                      // 是否显示表格搜索，此搜索是客户端搜索

	//showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
	//exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据

	columns: [
		{checkbox: true, width: '50px'}, {
			field: 'id',
			title: 'ID',
			align: 'center',
			width: '100px',
			//sortable: true,    // 是否排序
			/*
			formatter: function (value, row, index) {
				var pageSize = $treeTable.bootstrapTable('getOptions').pageSize;     //通过table的#id 得到每页多少条
				var pageNumber = $treeTable.bootstrapTable('getOptions').pageNumber; //通过table的#id 得到当前第几页
				return pageSize * (pageNumber - 1) + index + 1;
			}
			*/
		}, {
			field: 'name', align: 'center',title: '名称'
		}, {
			field: 'date_entered', align: 'center',title: '创建时间'
		}, {
			field: 'update_entered', align: 'center',title: '修改时间'
		}, {
			field: 'operate', title: '操作', width: '150px', align: 'center', formatter: btnGroup, // 自定义方法
			events: {
				'click .edit-btn': function (event, value, row, index) {
					edit(row.id);
				},
				'click .del-btn': function (event, value, row, index) {
					del(row.id);
				}
			}
		}],

	onLoadSuccess: function (data) {
		$("[data-toggle='tooltip']").tooltip();
	}
});
 // 操作按钮
function btnGroup(value, row, index) {
	let html = '<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>'+
	'<a href="#!" class="btn btn-xs btn-default m-r-5 del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
	return html;
}
function ajaxRequest(res) {
	console.log(res);
	$.ajax({
		url: "${pageContext.request.contextPath}/admin/role?method=ListData",
		type: 'post',
		dataType: 'json',
		data: res.data,
		success(data){
			console.log(data)
			res.success(data);
		}
	});
}
function add(){
	window.location.href="${pageContext.request.contextPath}/admin/role?method=Add";
}
function edit(id){
	if(id == 1) {
		lightyear.notify("超级管理员不可修改", 'danger', 3000);
		return;
	}
	window.location.href = "${pageContext.request.contextPath}/admin/role?method=Edit&id="+id;
}
function del(id){
	$.confirm({
        title: '警告',
        content: '您确定要删除吗？',
        type: 'orange',
        typeAnimated: false,
        buttons: {
            confirm: {
                text: '确定',
                btnClass: 'btn-orange',
                action: function(){
                	$.get("${pageContext.request.contextPath}/admin/role?method=Delete&id="+id, function(res){
                		if(res.code == 200) {
                			lightyear.notify(res.message, 'success', 3000);
                			$treeTable.bootstrapTable('refresh');
                		}else{
                			lightyear.notify(res.message, 'danger', 3000);
                		}
                	}, 'json');
                }
            },
            close: {
                text: '关闭',
            }
        }
    });
}
function selected_del() {
    var selRows = $treeTable.bootstrapTable("getSelections");
    if(selRows.length == 0){
		lightyear.notify("请至少选择一行", 'danger', 3000);
        return;
    }
    var postData = "";
    $.each(selRows,function(i) {
        postData +=  this.id;
        if (i < selRows.length - 1) {
            postData += ",";
        }
    });
	del(postData);
}
</script>